import { Component } from "react";
import sendHttp from "../../utils/http";
import './index.css'
import WithRouter from "../../router/withRouter";
class Home  extends Component {
        state = {
            heroList:[]
        }
        render() {
            let {heroList} = this.state;
            return (
                <div className="box">
                    {
                      heroList.map((item,index)=>{
                        return <div key={index} onClick={()=>this.goInfo(item.heroId)}>
                            <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                            <div>{item.name}</div>
                        </div>
                      })  
                    }
                </div>
            )
        }
       async componentDidMount(){
            let res = await sendHttp("/images/lol/act/img/js/heroList/hero_list.js",'get');
            console.log(res)
            this.setState({
                heroList:res.data.hero
            })
        }
        goInfo(heroId){
            this.props.router.navigate("/info",{
                state:{
                    heroId
                }
            })
        }
 }

export default WithRouter(Home);